<script setup>
import useArticleStore from '@/stores/article/index.js'
import useLoginStore from '@/stores/user/index.js'
import {ref, watch} from 'vue'
import router from '@/router/index.js'
import HotTitle from '@/components/hot-title/hot-title.vue'
import useScroll from '@/utils/useScroll.js'
import getDate from "@/utils/dateChange.js";
import {useRoute} from "vue-router";

//获取参数
const route = useRoute();

//分类显示,//切换频道数据
const currentIndex = ref(isNaN(Number(route.query.num)) ? -1 : Number(route.query.num))


const loginStore = useLoginStore()

const articleStore = useArticleStore()
articleStore.getHotNewsList(10)
articleStore.getChannelListAction()
articleStore.getHotTitleAction()

const rightNowLoginBtn = () => {
  loginStore.isShow = true
  loginStore.info = '立即登录'
}


//频道赋值
const changeBtn = async (channelId, index) => {
  //将当前页赋值为1
  articleStore.currentPage = 2
  articleStore.channelId = channelId
  currentIndex.value = index
  articleStore.index = index
  //分类显示
  await articleStore.getNewsListAction(1, 10, articleStore.searchParam, articleStore.channelId)
}

//文章详情
const detailNews = (value) => {
  router.push({
    path: '/detail',
    query: {
      id: value
    }
  })
}

const {isScrollBottom, scrollTop} = useScroll()

// //监听滚动
//热门文章侠士
const hotTitleRef = ref()
watch(scrollTop, (newValue) => {
  if (newValue >= 2500) {
    hotTitleRef.value.isShow = true
  } else {
    hotTitleRef.value.isShow = false
  }
})
</script>

<template>
  <div class="content">
    <div class="left">
      <ul class="hot">
        <li @click="changeBtn('-1', -1)" :class="{ active: articleStore.index === -1 }">推荐</li>
        <template v-for="(item, index) in articleStore.channelList" :key="item.id">
          <li @click="changeBtn(item.id, index)" :class="{ active: articleStore.index === index }">
            {{ item.channelName }}
          </li>
        </template>
      </ul>
      <div class="article" v-for="(item, index) in articleStore.loadNews">
        <div class="left-article" @click="detailNews(item.id)">
          <p class="title">{{ item.title }}</p>
          <ul class="desc-info">
            <li>{{ item.labels }}</li>
            <li>{{ item.commentCount }}评论</li>
            <li>{{ getDate(item.createTime) }}</li>
          </ul>
        </div>
        <div class="right-article" @click="detailNews(item.id)">
          <img :src="item.images"/>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="login" v-if="!loginStore.token">
        <p>登录后，时讯更懂你</p>
        <p>内容更有趣</p>
        <el-button type="danger" @click="rightNowLoginBtn">立即登录</el-button>
      </div>
      <div class="hot-title">
        <div class="header">
          <img src="@/assets/images/hot-title.png"/>
          <span>头条文章</span>
        </div>
        <ul class="title">
          <template v-for="(item, index) in articleStore.hotTitleList">
            <li>
              <span class="num" v-if="index === 0"
              ><img src="@/assets/images/icon_hot_board_stick.svg"
              /></span>
              <span class="num" v-else>{{ index }}</span>
              <p @click="detailNews(item.id)">{{ item.title }}</p>
            </li>
          </template>
        </ul>
      </div>

      <div class="hot-news">
        <div class="hot-header">
          <img src="@/assets/images/hot-news.png"/>
          <span>热门文章</span>
        </div>
        <ul class="hot-news-article" v-for="(item, index) in articleStore.hotNewsList">
          <li>
            <img style="min-width: 140px" :src="item.images"/>
            <span @click="detailNews(item.id)">{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>

    <hot-title class="hot-title-show" ref="hotTitleRef"/>
  </div>
</template>

<style scoped lang="less">
.content {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 16px 16px 0;
  width: 1060px;
  margin: 20px auto 0;

  .left {
    width: 658px;

    .article {
      box-sizing: border-box;
      padding: 16px 0;
      height: 144px;
      display: flex;
      justify-content: space-between;

      .right-article {
        margin-left: 18px;

        img {
          width: 156px;
          height: 104px;
        }
      }
    }

    .hot {
      margin-bottom: 20px;
      display: flex;

      li {
        flex: 1;
        width: 40px;
        height: 36px;
        line-height: 36px;
        cursor: pointer;

        &.active {
          color: rgba(240, 65, 66, 0.8);
        }
      }
    }
  }

  .right {
    width: 318px;
    margin-left: 20px;

    .login {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 320px;
      height: 160px;
      background-color: #fafafa;

      .el-button {
        margin-top: 10px;
      }
    }
  }

  .hot-title {
    margin-top: 20px;

    img {
      width: 24px;
      height: 22px;
    }

    span {
      margin-left: 10px;
      font-size: 20px;
    }

    .title {
      li:nth-child(2) .num {
        color: #a82e2e;
      }

      li:nth-child(3) .num {
        color: #f04142;
      }

      li:nth-child(4) .num {
        color: #ff9a03;
      }

      li {
        display: flex;
        padding: 12px 0;

        .num {
          width: 24px;
          height: 22px;
          color: #999;
          font-size: 16px;

          img {
            margin-left: -5px;
          }
        }
      }

      p:hover {
        cursor: pointer;
        color: #f04142;
      }
    }
  }

  .hot-news {
    margin-top: 20px;

    .hot-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      img {
        margin-right: 5px;
        width: 24px;
        height: 24px;
      }
    }
  }

  .hot-news-article {
    li {
      margin-bottom: 20px;
      display: flex;
      height: 100px;

      img {
        width: 154px;
      }

      span {
        display: inline-block;
        width: 300px;
        flex: 1;
        margin-left: 10px;
      }

      span:hover {
        color: #f04142;
        cursor: pointer;
      }
    }
  }

  .el-pagination {
    --el-pagination-button-width: 50px;
  }

  .left-article {
    //超出显示...
    display: flex;
    flex-direction: column;
    cursor: pointer;

    .title {

    }


    .desc-info {
      margin-top: 58px;
      display: flex;

      li {
        font-size: 14px;
        color: #999;
      }

      li:nth-child(2) {
        margin-left: 15px;
      }

      li:nth-child(3) {
        margin-left: 15px;
      }
    }


    &:hover {
      color: #f04142;
    }
  }


  .hot-title-show {
    margin-top: 80px;
  }
}
</style>
